<template>
  <div id="readContract">
    <h4 class="table">
      {{ isEsUser() ? '农民工简易劳动合同' : '农民工简易劳务合同' }}
      <el-button class="saveBtn exportContract" @click="exportContract"
        >导出</el-button
      >
    </h4>
    <ul class="content">
      <li>
        <ul class="partyA">
          <li>
            甲方(用人单位)名称
            <span id="companyName">{{
              this.contractInfos.companyName || '--'
            }}</span>
          </li>
          <li>
            统一社会信用代码
            <span id="companyCode">{{ this.contractInfos.uscc || '--' }}</span>
          </li>
          <li>
            用人单位地址
            <span id="companyAddress">{{
              this.contractInfos.bizAreaName || '--'
            }}</span>
          </li>
        </ul>
      </li>
      <li>
        <ul class="partyB">
          <li>
            乙方(劳动者)姓名
            <span id="employeeName">{{ this.contractInfos.name || '--' }}</span>
          </li>
          <li>
            身份证号码
            <span id="employeeIdcard">{{
              this.contractInfos.idcard || '--'
            }}</span>
          </li>
          <li>
            出生年月
            <span id="employeeBirthday">{{
              this.contractInfos.empBirth || '--'
            }}</span>
          </li>
          <li>
            户口所在地
            <span id="employeeProvince">{{
              this.contractInfos.provinceName || '--'
            }}</span
            >&nbsp;省
            <span id="employeeCity">{{
              this.contractInfos.countyName || '--'
            }}</span
            >&nbsp;县(市、区)
            根据《中华人民共和国劳动法》、《中华人民共和国劳动合同法》等有关法律法规及建设行业现状，甲乙双方经平等协商一致，自愿签订本合同，共同遵守本合同所列条款。
          </li>
        </ul>
      </li>
      <li>
        <p>一 、劳动合同期限</p>
        <div>
          &nbsp;经甲乙双方协商一致，本合同于
          <span id="employStartDate">{{
            this.contractInfos.beginTime || '--'
          }}</span>
          起至
          <span id="employEndDate">{{
            this.contractInfos.stopTime || '--'
          }}</span>
          止，工期（天）
          <span id="dates">{{ this.contractInfos.workDays || '--' }}</span
          >，试用期 <span>/</span>月。
        </div>
      </li>
      <li>
        <p>二 、工作内容和工作地点</p>
        <ul>
          <li>
            1、甲方招用乙方担任项目名称：
            <span id="eProjectName">{{
              this.contractInfos.projectName || '--'
            }}</span
            >，项目地址：
            <span id="projectAddress">{{
              this.contractInfos.address || '--'
            }}</span
            >，岗位(工种)：
            <span id="employWorkClass">{{
              this.contractInfos.workTypeName || '--'
            }}</span
            >，所属班组：
            <span id="employGroup">{{
              this.contractInfos.groupName || '--'
            }}</span
            >。
          </li>
          <li>
            2、根据岗位工作特点，乙方的工作地点为：
            <span id="partyBaddress">{{
              this.contractInfos.address || '--'
            }}</span
            >。
          </li>
          <li>3、乙方应按照甲方要求，完成工作并达到质量标准。</li>
          <li>4、甲方可依据乙方情况自由调整乙方工作地点及岗位。</li>
        </ul>
      </li>
      <li>
        <p>三 工作时间</p>
        <div>
          甲乙双方选择实行以下第
          <span>二</span>种工时制度：
          <br />
          <div style="line-height: 34px">
            <el-radio v-model="radio" label="standardTime"
              >(一)标准工时</el-radio
            >
            <el-radio v-model="radio" label="untime" checked
              >(二)不定时</el-radio
            >
          </div>
        </div>
      </li>
      <li>
        <p>四、劳动保护和劳动条件</p>
        <ul>
          <li>
            1、甲方应当在乙方上岗前进行安全生产教育，对从事电气焊、土建、水电设备安装等特殊工种的乙方进行岗前培训，乙方取得相应的操作证书方可上岗。
          </li>
          <li>
            2、甲方根据生产岗位的需要，按照国家劳动安全、卫生的有关规定为乙方配备必要的安全防护措施，发放必要的劳动保护用品。其中建筑施工现场要符合《建筑施工现场环境与卫生标准》。
          </li>
          <li>
            3、甲方将根据国家有关法律法规，建立安全生产制度；乙方应当严格遵守甲方的劳动安全制度，严禁违章作业，防止劳动过程中的事故，减少职业危害。
          </li>
        </ul>
      </li>
      <li>
        <p>五 、工资待遇和保险待遇</p>
        <ul>
          <li>1、双方约定的工资不得低于当地最低工资标准。</li>
          <li>
            2、乙方按照计量单位：
            <span id="unit">{{ this.contractInfos.unit || '--' }}</span
            >；计量单价（元）：
            <span id="ePrice">{{ this.contractInfos.price || '--' }}</span
            >。
          </li>
          <li>
            3、甲方安排乙方加班加点，应按照《劳动法》等相关规定支付加班加点工资。
          </li>
          <li>
            4、甲方应在每月
            <span id="sendDate">{{ this.contractInfos.salaryDay || '--' }}</span
            >日发放乙方的工资，并由乙方签字确认(最终按施工方提交的工资发放计划的日期为准)。甲方在劳动合同终止、解除后应当一次性付清乙方的工资。
          </li>
          <li>
            5、甲乙双方应严格按照国家、省有关规定，依法参加社会保险，履行缴费义务。
          </li>
        </ul>
      </li>
      <li>
        <p>六 、劳动纪律和劳动合同的解除、终止</p>
        <ul>
          <li>
            1、乙方应严格遵守甲方的各项规章制度、劳动纪律和安全技术操作规程。
          </li>
          <li>
            2、甲方有下列情形之一的，乙方可以随时解除劳动合同：
            <ul>
              <li>（1）在试用期内的；</li>
              <li>
                （2）甲方以暴力、威胁或者非法限制人身自由的手段强迫劳动的；
              </li>
              <li>（3）甲方侮辱、体罚、殴打、非法搜查和拘禁乙方的；</li>
              <li>
                （4）甲方未按照国家规定和劳动合同约定支付劳动报酬或者提供劳动安全、卫生条件的。
              </li>
              <li></li>
            </ul>
          </li>
          <li>
            3、乙方有下列情形之一的，甲方可以随时解除劳动合同：
            <ul>
              <li>(1)在试用期内被证明不符合录用条件的；</li>
              <li>(2)甲方以暴力、威胁或者非法限制人身自由的手段强迫劳动的；</li>
              <li>(3)严重失职或者营私舞弊，对甲方利益造成重大损害的；</li>
              <li>(4)被劳动教养或被追究刑事责任的；</li>
              <li>(5)不服从甲方正当工作安排的；</li>
              <li>(6)严重违反总包单位和甲方的施工现场安全管理规定的。</li>
              <li>(7)其它严重影响甲方工作或造成甲方严重损失的行为。</li>
            </ul>
          </li>
          <li>
            4、乙方单方解除本合同，应当提前三十日以书面形式通知甲方。（在试用期内提前三日通知甲方），不得擅自离职，造成甲方损失的，乙方承担赔偿责任。
          </li>
          <li>5、期满或双方约定的劳动合同终止条件出现，本合同即行终止。</li>
        </ul>
      </li>
      <li>
        <p>七 、经济补偿和法律责任</p>
        <ul>
          <li>
            1、因甲方原因解除劳动合同，甲方应按照国家、省有关规定支付经济补偿金。
          </li>
          <li>
            2、乙方在履行劳动合同期间，因个人失职给甲方造成损失的，应当承担赔偿责任。
          </li>
        </ul>
      </li>
      <li>
        <p>八 、劳动争议处理及其它</p>
        <ul>
          <li>
            1、双方因履行本合同发生争议后，甲乙双方可以向劳动争议调解委员会申请调解，调解不成，可以向当地劳动争议仲裁委员会申请仲裁；也可以直接向当地劳动争议仲裁委员会申请仲裁。
          </li>
          <li>
            2、甲方的规章制度及乙方工作项目规章制度作为本劳动合同的附件，与本劳动合同具有同等法律效力。
          </li>
          <li>
            3、本合同未尽事宜或与现行国家、省规定相悖的，按照有关规定执行。
          </li>
          <li>
            4、本合同一式二份，甲乙双方各执一份。本合同自双方盖章签字之日起生效。
          </li>
        </ul>
      </li>
      <li class="clearfix singleBox">
        <div class="fl">
          <P>
            甲方(公 章)：
            <span>{{ this.contractInfos.companyName || '--' }}</span>
          </P>
          <p>
            法定代表人或委托代理人：
            <span>{{ this.contractInfos.boss || '--' }}</span>
          </p>
          创建时间：
          <span>{{ this.contractInfos.inputDate || '--' }}</span>
        </div>
        <div class="fr pic">
          <P>乙方(签字或盖章)：</P>签订时间：
          <span>{{ this.contractInfos.confirmDate || '--' }}</span>
        </div>
        <div class="inforCss" v-if="this.contractInfos == '1'">
          <template v-for="(files, index) in item.fileExpandVOs">
            <el-image
              :key="index"
              class="imgCss"
              :src="files.absolutePath"
              :preview-src-list="[files.absolutePath]"
            ></el-image>
          </template>
        </div>
      </li>
      <li class="pic picWidth" v-if="contractInfos">
        <div
          v-if="contractInfos.fileExpandVOs.length > 0"
          style="margin-bottom: 15px"
        >
          人脸图片：
          <img :src="contractInfos.fileExpandVOs[1].url" alt />
        </div>
        <div v-if="contractInfos.fileExpandVOs.length > 0">
          用户签名：
          <img :src="contractInfos.fileExpandVOs[0].url" alt />
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  //搜索条件
  props: {
    contractInfos: {
      type: Object,
    },
  },
  mounted() {
    console.log(this.contractInfos)
  },

  methods: {
    exportContract() {
      this.$emit('exportContract', '')
    },
  },
}
</script>
<style scoped lang="less">
#readContract h4 {
  text-align: center;
}
.content {
  padding: 5px 35px;
}
.content li {
  margin-bottom: 20px;
  text-align: left;
}
.content li ul li {
  margin-bottom: 0px;
  padding-left: 20px;
}
#readContract .content .partyA {
  margin-top: 20px;
}

#readContract .content .partyA li,
#readContract .content .partyB li {
  padding-left: 0px;
}
#readContract .content .partyA #companyName {
  display: inline-block;
  padding: 0px;
  width: 235px;
}
#readContract .content .partyA #companyCode {
  display: inline-block;
  padding: 0px;
  width: 243px;
}
#readContract .content .partyA #companyAddress {
  display: inline-block;
  padding: 0px;
  width: 272px;
}
#readContract .content .partyB#companyCode {
  display: inline-block;
  padding: 0px;
  width: 239px;
}
#readContract .content .partyB #companyAddress {
  display: inline-block;
  padding: 0px;
  width: 263px;
}
#readContract .content .partyB #employeeName {
  display: inline-block;
  padding: 0px;
  width: 248px;
}
#readContract .content .partyB #employeeBirthday {
  display: inline-block;
  padding: 0px;
  width: 299px;
}
#readContract .content .partyB #employeeIdcard {
  display: inline-block;
  width: 285px;
  padding: 0px;
}
.content li div {
  padding-left: 20px;
}
.content li span {
  text-align: center;
  padding: 0px 15px;
  border-bottom: 1px solid black;
}
.content li p {
  margin-bottom: 0px;
  font-size: 14px;
}
.content li div input {
  height: 18px;
  width: 18px;
  vertical-align: bottom;
  margin-right: 10px;
  opacity: 1;
  position: static;
  margin-left: 50px;
}
.content li div label:nth-child(2) {
  margin-left: 50px;
}
#readContractWin + .dialog-button > a {
  opacity: 0;
}
.exportContract {
  float: right;
  height: 32px;
  font-size: 14px;
  padding: 0 10px;
}
.imgCss {
  width: 100px;
  margin-right: 50px;
}
.attendanceDialog .el-form--inline .el-form-item {
  margin-right: 0px;
}

li .pic img {
  vertical-align: top;
  width: 40%;
}
.singleBox div {
  widows: 50%;
}
/deep/ .dialogTable img {
  top: 0;
  left: 0;
  transform: translate(0, 0);
}

.img {
  width: 100%;
}

#readContract .content .el-checkbox {
  margin: 0 2px;
}

.table span {
  text-align: center;
  padding: 0px 5px;
  border-bottom: 1px solid black;
}
.content li {
  line-height: 21px;
}
/deep/ .picWidth img {
  vertical-align: top;
  width: 120px;
}
</style>
